<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="./js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        body{margin:0;font-family:黑体;}
        input{border:none;outline:none}

        header{width:100%;padding:15px 0;font-size:16px;color:#fff;background-color:#1D5FFE;text-align:center}
        .logo{width:100%;padding:40px 0;display:flex;justify-content:center;align-items:center;}
        .logo img{width:100px}
        .form{width:100%;padding:0 15px;box-sizing:border-box}
        .form .ipt{width:100%;display:flex;justify-content:center;align-items:center;border-bottom:solid 1px #eee;position:relative}
        .form .ipt .text{width:75px;font-size:14px;color:#333}
        .form .ipt input{flex:1;padding:15px;box-sizing:border-box;}
        .form .get_vercode{font-size:12px;color:#1D5FFE;position: absolute;top:0;bottom:0;right:0;display:flex;justify-content:center;align-items:center;}
        .form .get_vercode button{border:none;background:none;color:#1D5FFE;border:solid 1px #1D5FFE;padding:5px;box-sizing:border-box;border-radius:4px}
        .form .waiting_vercode{color:#999;display:none;font-size:12px}
        .register{width:100%;padding:0 15px;padding-top:50px;box-sizing:border-box}
        .register button{width:100%;height:40px;border-radius:5px;border:none;background-color:#1D5FFE;color:#fff;font-size:14px;}

        .box{padding:0 15px;box-sizing: border-box;margin:15px 0;display:none}

        .mist{display:none;position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.6)}
        .succeed_pop{display:none;width:80%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:微软雅黑}
        .succeed_pop .layer{background-color:#fff;padding:15px 0;border-radius:5px 5px 0 0}
        .succeed_pop .layer>div{width:100%;text-align:center;font-size:16px;}
        .succeed_pop .layer .title{font-weight:bold;margin-bottom:10px}
        .succeed_pop .layer .tips{font-size:12px;color:#999}
        .succeed_pop .submit{width:100%;background-color:#1D5FFE;height:40px;font-size:14px;color:#fff;display:flex;justify-content:center;align-items:center;border-radius:0 0 5px 5px}
        .dowmload{width:100%;padding:0 15px;padding-top:10px;box-sizing:border-box}
        .download button{width:100%;height:40px;border-radius:5px;border:none;background-color:#1D5FFE;color:#fff;font-size:14px;}
    </style>
</head>
<body>
    <header>注册</header>

    <div class="logo">
        <img src="./img/logo.png" alt="">
    </div>

    <div class="form">
        <div class="ipt">
            <div class="text">手机号</div>
            <input type="text" maxlength="11" class="phone_number" placeholder="请输入您的手机号">
        </div>
        <div class="ipt">
            <div class="text">验证码</div>
            <input type="text" class="vercode" maxlength="6" placeholder="请输入验证码">
            <div class="get_vercode"><button>获取验证码</button></div>
            <div class="waiting_vercode">重新获取<span>(60)</span></div>
        </div>
        <div class="ipt">
            <div class="text">密码</div>
            <input type="password" class="password" placeholder="请输入密码">
        </div>
        <div class="ipt">
            <div class="text">确认密码</div>
            <input type="password" class="repassword" placeholder="请再次输入密码">
        </div>
        <div class="ipt">
            <div class="text">推荐码</div>
            <input class="invitationCode" type="text" placeholder="请输入邀请码">
        </div>
    </div>
    <div class="box"><div class="alert alert-danger" role="alert">...</div></div>
    <div class="register">
        <button>注册</button>
    </div>
    <div class="dowmload">
       <a href="https://china-idc.co/app/">APP下载</a>
    </div>

    <div class="mist"></div>
    <div class="succeed_pop">
        <div class="layer">
            <div class="title">注册成功</div>
            <div class="tips">注册成功点击确认下载APP</div>
        </div>
        <div class="submit">确认</div>
    </div>

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script>
        
        //状态集合------------------------------------------
        let waiting_vercode = false;    //验证码是否等待中
        let vercode_timer;  //验证码等待计时器
        let vercode_time = 60;   //验证码等待时间
        //----------------------------------------------------


        //事件集合-------------------------------------------
        //获取验证码
        $(".get_vercode").on("click",function(){
            get_vercode($(".phone_number").val())
        });
        //注册
        $(".register button").on("click",function(){
            register(
                $(".phone_number").val(),
                $(".vercode").val(),
                $(".password").val(),
                $(".repassword").val(),
                $(".invitationCode").val()
            )
        });

        //点击确认去下载APP
        $(".succeed_pop .submit").on("click",function(){
            window.location.href = 'https://china-idc.co/app/';
        });
        //--------------------------------------------------



        //初始化-------------------------------------------
        //获取推荐码 
        $(".invitationCode").val(get_recommendation_code());
        
        //------------------------------------------------
        

        

        //方法集合-----------------------------------------
        //取得推荐码tid
        function get_recommendation_code() {
            var name,value;
            var str = location.href;     //取得整个地址栏
            var num = str.indexOf("?");
            str = str.substr(num+1);       //取得所有参数   stringvar.substr(start [, length ]
            var arr = str.split("&");      //各个参数放到数组里
            for(var i = 0;i < arr.length; i++){
                num = arr[i].indexOf("=");
                if(num>0) {
                    name = arr[i].substring(0,num);
                    value = arr[i].substr(num+1);
                    this[name] = value;
                }
            }
            return arr[0].slice(4);
        }

        //获取验证码
        function get_vercode(_phone_number){
            if(check_phone_number(_phone_number)){
                //请求获取验证码
                $.ajax('https://china-idc.co/api/web/yzm_creat',{
                    data:{
                        uname:_phone_number
                    },
                    type:'post',
                    dataType:"json",
                    timeout:10000,
                    success:function(data){
                        if(data.zt!=1){
                            error_pop(data.msg)
                        }
                    },
                    error:function(xhr,type,errorThrown){
                        error_pop('获取验证码失败;网络错误，请稍后重试');
                    }
                });
                //设置定时器
                $(".get_vercode").hide();
                $(".waiting_vercode").show();
                vercode_timer = setInterval(function(){
                    vercode_time--;
                    $(".waiting_vercode span").text("("+vercode_time+")");
                    if(vercode_time<=0){
                        clearInterval(vercode_timer);
                        $(".get_vercode").show();
                        $(".waiting_vercode").hide();
                        vercode_time = 60;
                        $(".waiting_vercode span").text("("+vercode_time+")")
                    }
                },1000)
            }
        }

        //验证手机号正确性
        function check_phone_number(_phone_number){
            var reg = /^[1][3|4|5|6|7|8|9][0-9]{9}$/; //正则表达式，验证手机号
            if (_phone_number == '') {
                error_pop("请输入手机号");
                return
            }
            if (!reg.test(_phone_number)) {
                error_pop("手机号格式不正确");
                return
            }
            return true
        }

        //错误弹窗管理
        function error_pop(msg){
            $(".box .alert").text(msg);
            $(".box").fadeIn();
            setTimeout(function(){
                $(".box").fadeOut()
            },4000)
        }
        //注册
        function register(phone_number,vercode,password,repassword,invitation_code) {
            var reg = /^[1][3|4|5|7|8|9][0-9]{9}$/; //正则表达式，验证手机号
            var regs = /^[0-9a-zA-Z]*$/g; //正则表达式，必须是数字或者字母
            if (phone_number == '') {
                error_pop("请输入手机号");
                return
            }
            if(!check_phone_number(phone_number)) return;
            if (vercode == '') {
                error_pop("请输入短信验证码");
                return
            }
            if (password == '') {
                error_pop("请设置登录密码");
                return
            }
            if (password.length < 6 && !reg.test(password)) {
                error_pop("登录密码必须是字母或者数字且大于6位");
                return
            }
            if (repassword == '') {
                error_pop("请再次输入登录密码");
                return
            }
            if (repassword !== password) {
                error_pop("两次登录密码不一致");
                return
            }
            if (invitation_code == '') {
                error_pop("请输入推荐码");
                return
            }
            if (phone_number !== '' && password !== '' && repassword !== '' && invitation_code !== '') {
                $.ajax('https://china-idc.co/api/web/ajax_userinfo_add',{
                    data:{
                        uname: phone_number,
                        pwd: password,
                        repwd:repassword,
                        tjm: invitation_code,
                        yzm:vercode
                    },
                    dataType:'json',
                    type:'post',
                    timeout:10000,
                    success:function(data){
                        if(data.zt ==1){
                            $(".mist").fadeIn();
                            $(".succeed_pop").show()
                        }else{
                            error_pop('注册失败:'+data.msg);
                        }

                    },error:function(xhr,type,errorThrown){
                        error_pop("网络错误，请稍后重试")
                    }
                });
            }
        }
        //------------------------------------------------------------------
    </script>
</body>
</html>